<template>
  <a-drawer :title="title" :width="700" :visible="visible" @close="close">
    <custom-table
      ref="table"
      rowKey="id"
      :showAlert="false"
      :showSelection="false"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
      @change="onTableChange"
    >
      <template slot="gangsType" slot-scope="text">
        <span v-if="text == 1">内部</span>
        <span v-if="text == 2">外部</span>
      </template>
    </custom-table>
  </a-drawer>
</template>

<script>
import * as eventModelApi from '@/api/wxSmuggle/eventModel.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  components: {
    CustomTable
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    taskId: {
      type: [String, Number]
    },
    msisdn: {
      type: [String, Number]
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      columns: [
        {
          title: '序号',
          width: 60,
          align: 'center',
          dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '姓名/代号',
          dataIndex: 'name',
          width: 60,
          align: 'center'
        },
        {
          title: '手机号码',
          dataIndex: 'relateMsisdn',
          width: 80,
          align: 'center'
        },
        {
          title: '归属地',
          dataIndex: 'phoneArea',
          width: 70,
          align: 'center'
        },
        {
          title: '团伙类型',
          dataIndex: 'gangsType',
          width: 40,
          align: 'center',
          scopedSlots: { customRender: 'gangsType' }
        },
        {
          title: '通联次数',
          dataIndex: 'amount',
          width: 40,
          align: 'center'
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  watch: {
    msisdn(value) {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    }
  },
  methods: {
    add() {
      this.visible = true
      this.$nextTick(() => {})
    },
    edit(record) {
      this.visible = true
      this.$nextTick(() => {})
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    refreshTable() {
      let obj = {
        taskId: this.taskId,
        msisdn: this.msisdn
      }
      let form = Object.assign({}, obj, this.pageFilter)
      this.loading = true
      eventModelApi
        .getGangRelations(form)
        .then(res => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    }
  }
}
</script>
<style lang="less" scoped></style>
